import { reactive, watch, computed } from 'vue'
import { cloneDeep } from 'lodash-es'

const useInitState = (props, state) => {
  Object.assign(state, {
    showSize: props.showSize,
    sizeLeftColumns: props.sizeColumns,
    sizeRightColumns: props.sizeColumns,
    sizeLineFilesLeft: props.sizeLineFiles || []
  })
}
const useCopyOperate = state => {
  const resetEvent = () => {
    state.sizeLeftTableData = []
    state.sizeRightTableData = []
    state.sizeLineFilesRight = []
    state.sizeLineFilesLeft = []
  }
  // 处理移入之后选择框置灰不可用
  const handleAshEvent = key => {
    return state.sizeDisabledRowKeys.includes(key)
  }
  /**
   * 移入度尺图
   */
  const moveInSizeLine = () => {
    if (state.showSize && state.sizeLineFileChecked) {
      state.sizeLineFilesRight = cloneDeep(state.sizeLineFilesLeft)
    }
  }
  /**
   * 移出度尺图
   */
  const moveOutSizeLine = () => {
    state.sizeLineFileRightChecked = false
    state.sizeLineFileChecked = false
    state.sizeLineFilesRight = []
  }
  const moveInEvent = () => {
    state.sizeRightTableData = cloneDeep(state.sizeSelectedRows)
    state.sizeDisabledRowKeys = state.sizeRightTableData.map(item => item.id)
    // // 重新渲染用以将已选中置灰
    state.sizeLeftTableData = cloneDeep(state.sizeLeftTableData)
    moveInSizeLine()
  }
  const moveOutEvent = () => {
    const moveoutArr = state.sizeRightTableData.filter(
      item => !state.sizeSelectedRowKeys1.includes(item.id)
    )

    state.sizeRightTableData = cloneDeep(moveoutArr)
    state.sizeSelectedRowKeys = state.sizeRightTableData.map(item => item.id)
    state.sizeDisabledRowKeys = state.sizeRightTableData.map(item => item.id)
    // // 重新渲染用以将已选中置灰
    state.sizeLeftTableData = cloneDeep(state.sizeLeftTableData)
    state.sizeSelectedRowKeys1 = []
    moveOutSizeLine()
  }
  const checkSizeChangeEvent = e => {
    const { checked, value } = e.target
    if (checked) {
      state.checkSizeCodes.push(value)
    } else {
      const index = state.checkSizeCodes.indexOf(value)
      index !== -1 && state.checkSizeCodes.splice(index, 1)
    }
  }
  const getSubmitData = () => {
    return {
      sizeLineFilesRight: state.sizeLineFilesRight || [],
      sizeRightTableData: state.sizeRightTableData || [],
      checkSizeCodes: state.checkSizeCodes || []
    }
  }
  return {
    resetEvent,
    handleAshEvent,
    moveInSizeLine,
    moveInEvent,
    moveOutEvent,
    checkSizeChangeEvent,
    getSubmitData
  }
}

const useCopyWatch = (props, state) => {
  const { resetEvent } = useCopyOperate(state)
  watch(
    () => props.sizeLineFiles,
    val => {
      if (!props.showSize) return
      state.sizeLineFilesLeft = val
    },
    {
      immediate: true,
      deep: true
    }
  )
  watch(
    () => props.data,
    () => {
      state.sizeLeftTableData = cloneDeep(props.data)
    },
    {
      immediate: true,
      deep: true
    }
  )
  watch(
    () => state.checkSizeCodes,
    val => {
      if (!props.showSize) return
      state.sizeRightColumns = [
        {
          title: '代号',
          dataIndex: 'measurementChartCode',
          key: 'measurementChartCode',
          width: 60
        },
        {
          title: '部位',
          dataIndex: 'position',
          key: 'position',
          width: 250
        },
        ...(val?.map(_ => {
          return {
            title: _,
            key: _,
            dataIndex: _,
            width: 80
          }
        }) || [])
      ]
    },
    {
      deep: true,
      immediate: true
    }
  )
  watch(
    () => props.cp,
    val => {
      if (val) {
        console.log(props.sizeCodeList)
      } else {
        resetEvent()
      }
    },
    {
      immediate: true,
      deep: true
    }
  )
  watch(
    () => props.sizeColumns,
    val => {
      console.log(val, 'vallll')
      state.sizeLeftColumns = val
      state.checkSizeCodes = [...props.sizeCodeList]
    }
  )
}
const useCopyComputed = state => {
  const { handleAshEvent } = useCopyOperate(state)
  const rowSizeSelection = computed(() => {
    return {
      selectedRowKeys: state.sizeSelectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        state.sizeSelectedRowKeys = selectedRowKeys
        state.sizeSelectedRows = selectedRows
      },
      getCheckboxProps: record => ({
        disabled: handleAshEvent(record.id)
      })
    }
  })
  const rowSizeSelectionRight = computed(() => {
    return {
      selectedRowKeys: state.sizeSelectedRowKeys1,
      onChange: (selectedRowKeys, selectedRows) => {
        state.sizeSelectedRowKeys1 = selectedRowKeys
        state.sizeSelectedRows1 = selectedRows
      }
    }
  })
  const disMoveRightBtn = computed(() => {
    let flag = false
    if (state.sizeSelectedRowKeys.length) {
      const disall = state.sizeSelectedRowKeys.every(item =>
        state.sizeDisabledRowKeys.includes(item)
      )
      if (disall) {
        flag = true
      } else {
        flag = false
      }
    } else {
      flag = true
    }
    if (state.sizeLineFileChecked) {
      flag = false
    }
    return flag
  })
  const disMoveLeftBtn = computed(() => {
    return (
      (!state.sizeSelectedRowKeys1.length ||
        !state.sizeRightTableData.length) &&
      !state.sizeLineFileRightChecked
    )
  })
  return {
    rowSizeSelection,
    rowSizeSelectionRight,
    disMoveRightBtn,
    disMoveLeftBtn
  }
}
export const useState = option => {
  return reactive({
    // cp: '',
    currentCp: option.currentCp,
    sizeLeftColumns: [],
    sizeRightColumns: [],
    sizeLeftTableData: [],
    sizeRightTableData: [],
    // sizeCodeList: [],
    checkSizeCodes: [],
    sizeSelectedRowKeys: [],
    sizeSelectedRows: [],
    sizeDisabledRowKeys: [],
    sizeSelectedRowKeys1: [],
    sizeSelectedRows1: [],
    sizeLineFilesLeft: [],
    sizeLineFilesRight: [],
    sizeLineFileChecked: false,
    sizeLineFileRightChecked: false
  })
}

export const useCopy = (props, state) => {
  const {
    resetEvent,
    moveInEvent,
    moveOutEvent,
    checkSizeChangeEvent,
    getSubmitData
  } = useCopyOperate(state)
  useInitState(props, state)
  useCopyWatch(props, state)

  return {
    ...useCopyComputed(state),
    reset: resetEvent,
    moveIn: moveInEvent,
    moveOut: moveOutEvent,
    checkSizeChange: checkSizeChangeEvent,
    getSubmitData
  }
}
